<template>
    <div>
        <el-row>
            <el-col :span="24">
                <h2>{{ title }}</h2>
            </el-col>
            <el-col :span="24">
                <el-button size="mini" @click="$router.go(-1)">返回</el-button>
            </el-col>
            <el-col :span="24">
                <el-form :model="formData" :rules="rules" ref="userForm">
                    <el-form-item label="名称" prop="nickName">
                        <el-input v-model="formData.nickName"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="gender">
                        <el-input v-model="formData.gender"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model="formData.age" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="小组编号" prop="squadId">
                        <el-select v-model="formData.squadId" placeholder="请选择小组">
                            <el-option
                                v-for="item in squadList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSubmit">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {selectSquadList} from "@/api/squadApi"
import {addUser} from "@/api/userApi"

export default {
    name: "addUser",
    data() {
        return {
            title: "新增用户",
            squadList: [], // 小组列表
            formData: {
                nickName: '',
                gender: '',
                age: null,
                squadId: null
            },
            rules: {
                nickName: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请输入性别', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                ],
                squadId: [
                    { required: true, message: '请选择小组', trigger: 'change' }
                ]
            }
        };
    },
    created() {
        // 组件创建时获取小组列表
        this.getSquadList();
    },
    methods: {
        // 获取小组列表
        async getSquadList() {
            try {
                selectSquadList().then(response =>{
                    this.squadList = response.data
                })
            } catch (error) {
                this.$message.error('获取小组列表失败');
                console.error('获取小组列表失败:', error);
            }
        },
        // 提交表单
        handleSubmit() {
            this.$refs.userForm.validate(async (valid) => {
                if (valid) {
                    try {
                        addUser(this.formData).then(res =>{
                            if (res.code === 200) {
                                this.$message.success('添加用户成功');
                                this.$router.go(-1);
                            }
                        })
                    } catch (error) {
                        console.error('添加用户失败:', error.response || error);
                        this.$message.error(error.response?.data?.message || '添加用户失败');
                    }
                }
            });
        }
    }
}
</script>

<style scoped>
.el-form {
    width: 500px;
    margin: 20px auto;
}
</style>